/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">第三方机构</b>
    </p>
    <div class="main">
      <div class="num_box">
        <div class="left">{{thirdCom.laowu}}</div>
        <div class="right">{{thirdCom.pingu}}</div>
      </div>
      <div class="chart_box">
        <div class="left" :style="{flex: thirdCom.laowu/(thirdCom.laowu+thirdCom.pingu)*100 + '%'}"></div>
        <div class="right" :style="{flex: thirdCom.pingu/(thirdCom.laowu+thirdCom.pingu)*100 + '%'}"></div>
      </div>
      <div class="name_box">
        <div class="left">劳务机构</div>
        <div class="right">评估公司</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    thirdCom: Object
  },
  computed: {
 
  },
  data() {
    return {};
  },
  mounted() {

  },
  methods: {

  },
  components: {}
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.main {
  padding: 6px;
  .num_box {
    .mix-flex-center();

    .left,
    .right {
      flex: 1;
      .mix-flex-center();
      font-size:18px;
    }

    .left {
      justify-content: flex-start;
      color: @primary;
    }

    .right {
      justify-content: flex-end;
      color: #fe574d;
      ;
    }

  }

  .chart_box {
    .mix-flex-center();
    height: 20px;
    border-radius: 20px;
    overflow: hidden;

    .left,
    .right {
      flex: 1;
      height: 100%;
      .mix-flex-center();
    }

    .left {
      justify-content: flex-start;
      background: @primary;
      margin-right: 2px;
    }

    .right {
      justify-content: flex-end;
      background: #fe574d;
      margin-left: 2px;
    }
  }

  .name_box {
    .mix-flex-center();

    .left,
    .right {
      flex: 1;
      .mix-flex-center();
    }

    .left {
      justify-content: flex-start;
      color: @primary;
    }

    .right {
      justify-content: flex-end;
      color: #fe574d;
      ;
    }

  }
}

</style>
